<template>
  <div>
    <el-button type="success">Success</el-button>
    <el-button link type="danger">链接按钮</el-button>
    <el-button type="primary" :icon="Edit" />
    <p></p>
    <div :style="{ width: '100px', height: '100px', boxShadow: `var(${getCssVarName('light')})` }"></div>
    <p></p>
    <div style="width: 100px; height: 100px; box-shadow: 0 0 12px rgba(0, 0, 0, 0.12)"></div>
    <el-tree-select v-model="value" :data="data" />
  </div>
</template>

<script setup lang="ts">
import { Edit } from '@element-plus/icons-vue'
import { ref } from 'vue'

const getCssVarName = (type: string) => {
  return `--el-box-shadow${type ? '-' : ''}${type}` 
}

const value = ref()

const data = [
  {
    value: '1',
    label: 'Level one 1',
    children: [
      {
        value: '1-1',
        label: 'Level two 1-1',
        children: [
          {
            value: '1-1-1',
            label: 'Level three 1-1-1',
          },
        ],
      },
    ],
  },
  {
    value: '2',
    label: 'Level one 2',
    children: [
      {
        value: '2-1',
        label: 'Level two 2-1',
        children: [
          {
            value: '2-1-1',
            label: 'Level three 2-1-1',
          },
        ],
      },
      {
        value: '2-2',
        label: 'Level two 2-2',
        children: [
          {
            value: '2-2-1',
            label: 'Level three 2-2-1',
          },
        ],
      },
    ],
  },
  {
    value: '3',
    label: 'Level one 3',
    children: [
      {
        value: '3-1',
        label: 'Level two 3-1',
        children: [
          {
            value: '3-1-1',
            label: 'Level three 3-1-1',
          },
        ],
      },
      {
        value: '3-2',
        label: 'Level two 3-2',
        children: [
          {
            value: '3-2-1',
            label: 'Level three 3-2-1',
          },
        ],
      },
    ],
  },
]
</script>

<style scoped>

</style>